<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<link href="Font-Awesome/css/font-awesome.min.css" rel="stylesheet" />
		<link href="style/main.css" rel="stylesheet" />
  <script type="text/javascript" charset="utf-8" th:src="@{ueditor.config.js}"></script>
    <script type="text/javascript" charset="utf-8" th:src="@{ueditor.all.js}"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" th:src="@{lang/zh-cn/zh-cn.js}"></script>

		<style type="text/css">
			div {
				width: 100%;
			}
		</style>
	</head>

	<body>
		<div id="wrapper">

			<div id="navbar">
				<div class="logo"></div>
				<ul class="navbox">
					<li data-src="index.html">数据列表</li>
					<li data-src="addBanner.html">添加banner</li>
					<li data-src="addCase.html">添加案例</li>
					<li class="in" data-src="addActivity.html">添加文章</li>
				</ul>
			</div>
			<div id="main">
				<div class="content">
					<div class="row">
						<div class="col-sm-12">
							<form class="form-horizontal">
								<div class="col-sm-12">
									<div class="col-sm-12 addtitle">添加文章</div>
								</div>
								<div class="col-sm-10">
									<div class="col-sm-6 codebox">
										<div class="form-group">
											<label for="name" class="col-sm-4 control-label left">选择模块</label>
											<div class="col-sm-4">
												<div class="select">
													<div class="select-text select-text1 big-select" id="code">一级模块</div>
													<span class="icon-sort-down"></span>
													<ul class="select-ul">
														<li data-id="1">助力观点</li>
														<li data-id="2">助力资讯</li>
													</ul>
												</div>
											</div>
											<div class="col-sm-4">
												<div class="select">
													<div class="select-text select-text2 big-select select-text2">二级模块</div>
													<span class="icon-sort-down"></span>
													<ul class="select-ul ul2">
														<li data-type="1">观点</li>
														<li data-type="2">评论</li>
														<li data-type="3">文章</li>
													</ul>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="col-sm-12">

									<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">标题</label>
											<div class="col-sm-8">
												<input type="text" class="form-control" name="tittle" id="tittle" maxlength="" placeholder="">
											</div>
										</div>
									</div>
									<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">文章外链</label>
											<div class="col-sm-8">
												<input type="text" class="form-control" id="linkUrl" maxlength="" placeholder="">
											</div>
										</div>
									</div>
									
										<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">文章简介</label>
											<div class="col-sm-8">
												<textarea id="introduce"  class="form-control" rows="3"></textarea>
											</div>
										</div>
									</div> 
									
									<div class="col-sm-10">
										<div class="form-group">
											<label for="name" class="col-sm-2 control-label left">封面图片</label>
											<div class="col-sm-7">
												<input type="text" class="form-control" id="imgsrc" maxlength="" placeholder="">
														<input type="hidden" name="imgUrl" id="imgUrl" >
											</div>
											<div class="col-sm-3">
												<input type="button" class="btn green-btn up-img" value="上传图片" />
											</div>
										</div>
									</div>
									<div class="col-sm-10">
										<div class="form-group">
											<div class="col-sm-2"></div>
											<div class="col-sm-8">
												<script id="editor" type="text/plain" style="height:300px;"></script>
											</div>
										</div>
									</div>
									<div class="col-sm-10">
										<div class="btns col-sm-10">
									<input type="text"  class="btn green-btn l-btn surebtn" value="添  加" />
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<input type="file" id="file" style="display: none;" />
		<script th:src="@{script/jquery-min.js}"></script>
		<script th:src="@{script/ishoock.tools.js}"></script>
		<script th:src="@{script/main.js}"></script>
		<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
		<script th:src="@{bootstrap/js/bootstrap-paginator.js}"></script>
		<script>
			var type2=0,contentArr=[];
			var typeOne = "";
			var typeTwo = "";
			var is_update = false;
			
			var Id=location.getQuery("id");
			var tab_index=location.getQuery("tab_index");
		
	 		if(tab_index == 3){
				console.log(Id+'==>'+tab_index); 
				
				$.get("/opinion/aopinion", {'id':Id},
						  function(data){
					 console.log(data);
	     	          var code =  parseInt(data.code);
		        	   var result = data.result;
		        	  var  ue =  UE.getEditor('editor');
		        	 console.log(result.content); 
		        	  if(code==1){
		        		  is_update = true;
		        		  ue.ready(function() { 
		        			  moudle_type=result.type;
			        			$("#imgUrl").val(result.imgUrl);
			        			$("#imgsrc").val(result.imgUrl);
			  			        $("#linkUrl").val(result.linkUrl);
			  			       $("#tittle").val(result.tittle);
			  			       $("#introduce").val(result.introduce);
			  			     typeOne =  result.typeOne;
			  			     typeTwo =  result.typeTwo;
			  			     if(result.typeOne==1){
			  			    	$(".select-text1").text("助力观点");			
			  			    	}else if(result.typeOne==2){
			  						$(".select-text1").text("助力资讯");
			  						$(".ul2").children().eq(0).html("新闻");
			  						$(".ul2").children().eq(1).html("活动");
			  						$(".ul2").children().eq(2).html("建设");
			  				
			  					}
			  				//二级模块
			 				if(result.typeTwo==1){
			 					$(".select-text2").text("观点");
			 				}else if(result.typeTwo==2){
			 					$(".select-text2").text("评论");
			 				}else if(result.typeTwo==3){
			 					$(".select-text2").text("文章");
			 				}else if(result.typeTwo==4){
			 					$(".select-text2").text("新闻");
			 				}else if(result.typeTwo==5){
			 					$(".select-text2").text("活动");
			 				}else if(result.typeTwo==6){
			 					$(".select-text2").text("建设");
			 				} 
			  			     
			  			     
			  			     
			  			     
		        			  ue.setContent(result.content);
		        		  });
		        		 
		        	  }else{

		        	  }
						 
			 }); 
				
			} 
			
			
			
			
			$(function() {
				//点击导航栏
				$("#navbar .navbox li").on("click",function(){
					window.location.href=$(this).attr("data-src");
				});
				
				//点击select
				$(".select").on("click", function(event) {
					$(this).children(".select-ul").slideToggle();
					event.stopPropagation();
				});
				//点击select下的li选项
			$(".select-ul>li").on("click", function(event) {
					$(this).parents(".select").children(".select-text").text($(this).text());
					if($(this).attr("data-id") == 1) {
						typeOne = '1';
						typeTwo = "";
						$(".select-text2").html("二级模块");
						$(".ul2").children().eq(0).html("观点");
						$(".ul2").children().eq(1).html("评论");
						$(".ul2").children().eq(2).html("文章");
						
						$(".ul2").children().eq(0).attr("data-type",1);
  						$(".ul2").children().eq(1).attr("data-type",2);
  						$(".ul2").children().eq(2).attr("data-type",3);
						
					} else if($(this).attr("data-id") ==2) {
						typeOne = '2';
						typeTwo = "";
						$(".select-text2").html("二级模块");
						$(".ul2").children().eq(0).html("新闻");
						$(".ul2").children().eq(1).html("活动");
						$(".ul2").children().eq(2).html("建设");
						$(".ul2").children().eq(0).attr("data-type",4);
  						$(".ul2").children().eq(1).attr("data-type",5);
  						$(".ul2").children().eq(2).attr("data-type",6);
					}
					console.log(typeOne);
					$(this).parents(".select-ul").slideUp();
					event.stopPropagation();
				});

				
				$(".ul2 li").on("click",function(){
					$(this).parents(".select").children(".select-text").text($(this).text());
					typeTwo =$(this).attr("data-type");
					$(this).parents(".select-ul").slideUp();
					console.log(typeTwo);
					event.stopPropagation();
				});
				$(".select-ul .ul2").on("click",function(){
					$(this).parents(".select").children(".select-text").text($(this).text());
					type2=$(this).attr("data-type");
					 console.log($(this).attr("data-type"));
					$(this).parents(".select-ul").slideUp();
					event.stopPropagation();
				});

				//点击确定按钮
				$(".btns .surebtn").on("click", function() {
					//模块type;title;link(有文章内容可不填)；封面图photo；文章内容content(如果有link可不填)；
			     	var content = UE.getEditor('editor').getContent();
			        var imgUrl =$("#imgUrl").val();
			        var linkUrl = $("#linkUrl").val();
			        var tittle = $("#tittle").val();
			        var introduce = $("#introduce").val();
			    /*     alert(typeOne+"==>"+typeTwo+"==>"+content+"==>"+imgUrl+"==>"+linkUrl+"==>"+tittle); */
		 /*  console.log(typeOne+"==>"+typeTwo+"==>"+content+"==>"+imgUrl+"==>"+linkUrl+"==>"+tittle+"==>"+introduce);  */

			    if(typeOne == ""){
			    	alert('请选择一级模块');
			    	return;
			    }
				
			    if(typeTwo == ""){
			    	alert('请选择二级模块');
			    	return;
			    }	
				
			    if(tittle == ""){
			    	alert('请填写标题');
			    	return;
			    }
			    if(linkUrl == "" && content == "" ){
			    	alert('请填文章外链或者文章内容');
			    	return;
			    }  
			    if(introduce == ""){
			    	alert('请填文章简介');
			    	return;
			    }
			    if(imgUrl == ""){
			    	alert('请上传封面图片');
			    	return;
			    }  
			/*     if(content == ""){
			    	alert('请填写内容详情');
			    	return;
			    }    */
			    if(is_update){
			    	$.post("/opinion/update",{'id':Id,'typeOne':typeOne,'typeTwo':typeTwo,'linkUrl':linkUrl,'imgUrl':imgUrl,'content':content,'tittle':tittle,'introduce':introduce},
							   function(returndata){
						   console.log(returndata);
							     var code =  parseInt(returndata.code);
					        	  if(code==1){
					        		  alert("修改成功");
					        		  window.location.reload();
					        	  }else{
					        		  alert("修改失败");
					        	  }
							   }); 
			    }else{	
			    	$.post("/opinion/add",{'typeOne':typeOne,'typeTwo':typeTwo,'linkUrl':linkUrl,'imgUrl':imgUrl,'content':content,'tittle':tittle,'introduce':introduce},
						   function(returndata){
					   console.log(returndata);
						     var code =  parseInt(returndata.code);
				        	  if(code==1){
				        		  alert("添加成功");
				        		  window.location.reload();
				        	  }else{
				        		  alert("添加失败");
				        	  }
						   }); 
			    
			    }
			    
				
						//上传数据
			/* 			
					} */
				});

				//上传图片
				$(".up-img").on('click', function() {
					$("#file").trigger('click');
					$img = $(this);
				});

				var eleFile = document.querySelector('#file');

				// 压缩图片需要的一些元素和对象
				var reader = new FileReader(),
					img = new Image();

				// 选择的文件对象
				var file = null;

				// 缩放图片需要的canvas
				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');

				// base64地址图片加载完毕后
				img.onload = function() {
					// 图片原始尺寸
					var originWidth = this.width;
					var originHeight = this.height;
					// 最大尺寸限制
					var maxWidth = 400,
						maxHeight = 400;
					// 目标尺寸
					var targetWidth = originWidth,
						targetHeight = originHeight;
					// 图片尺寸超过400x400的限制
					if(originWidth > maxWidth || originHeight > maxHeight) {
						if(originWidth / originHeight > maxWidth / maxHeight) {
							// 更宽，按照宽度限定尺寸
							targetWidth = maxWidth;
							targetHeight = Math.round(maxWidth * (originHeight / originWidth));
						} else {
							targetHeight = maxHeight;
							targetWidth = Math.round(maxHeight * (originWidth / originHeight));
						}
					}

					// canvas对图片进行缩放
					canvas.width = targetWidth;
					canvas.height = targetHeight;
					// 清除画布
					context.clearRect(0, 0, targetWidth, targetHeight);
					// 图片压缩
					context.drawImage(img, 0, 0, targetWidth, targetHeight);
					// canvas转为blob并上传
					//					canvas.toBlob(function(blob) {
					//						// 图片ajax上传
					//						var xhr = new XMLHttpRequest();
					//						// 文件上传成功
					//						xhr.onreadystatechange = function() {
					//							if(xhr.status == 200) {
					//								// xhr.responseText就是返回的数据
					//							}
					//						};
					//						// 开始上传
					//						xhr.open("POST", 'upload.php', true);
					//						xhr.send(blob);
					//					}, file.type || 'image/png');
				};

				// 文件base64化，以便获知图片原始尺寸
				reader.onload = function(e) {
					img.src = e.target.result;
				};
				eleFile.addEventListener('change', function(event) {
					file = event.target.files[0];
					
					 var formData = new FormData();
				        formData.append('file',file);    //将文件转成二进制形式
				       $.ajax({  
				          url: '/img/addOpinion' ,  /*这是处理文件上传的servlet*/
				          type: 'POST',  
				          data:formData,  
				          async: false,  
				          cache: false,  
				          processData: false,  
				          contentType: false,
				          success: function (returndata) {  
				        	  console.log(returndata);
				        	  var code =  parseInt(returndata.code);
				        	  if(code==1){
				     /*    		  alert("上传成功"); */
				        		  $("#imgUrl").val(returndata.result);
				        	  }else{
				        		  alert("上传失败");
				        	  }
				          },  
				          error: function (returndata) {  
				              alert(returndata);  
				          }  
				     });  
					
					$("#imgsrc").val(this.value);
					//					console.log(this.value);
					// 选择的文件是图片
					if(file.type.indexOf("image") == 0) {
						reader.readAsDataURL(file);
					}
				});

			});
		</script>
		<script type="text/javascript">
			//实例化编辑器
			//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
			var ue = UE.getEditor('editor');

			function isFocus(e) {
				alert(UE.getEditor('editor').isFocus());
				UE.dom.domUtils.preventDefault(e)
			}

			function setblur(e) {
				UE.getEditor('editor').blur();
				UE.dom.domUtils.preventDefault(e)
			}

			function insertHtml() {
				var value = prompt('插入html代码', '');
				UE.getEditor('editor').execCommand('insertHtml', value)
			}

			function createEditor() {
				enableBtn();
				UE.getEditor('editor');
			}

			function getAllHtml() {
				alert(UE.getEditor('editor').getAllHtml())
			}

	function getContent() {
				var arr = [];
//				arr.push("使用editor.getContent()方法可以获得编辑器的内容");
//				arr.push("内容为：");
				arr.push(UE.getEditor('editor').getContent());
				contentArr.push(UE.getEditor('editor').getContent());
//				alert(arr.join("\n"));
			}

			function getPlainTxt() {
				var arr = [];
				arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
				arr.push("内容为：");
				arr.push(UE.getEditor('editor').getPlainTxt());
				alert(arr.join('\n'))
			}

			function setContent(isAppendTo) {
				var arr = [];
				arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
				UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
				alert(arr.join("\n"));
			}

			function setDisabled() {
				UE.getEditor('editor').setDisabled('fullscreen');
				disableBtn("enable");
			}

			function setEnabled() {
				UE.getEditor('editor').setEnabled();
				enableBtn();
			}

			function getText() {
				//当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
				var range = UE.getEditor('editor').selection.getRange();
				range.select();
				var txt = UE.getEditor('editor').selection.getText();
				alert(txt)
			}

			function getContentTxt() {
				var arr = [];
				arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
				arr.push("编辑器的纯文本内容为：");
				arr.push(UE.getEditor('editor').getContentTxt());
				alert(arr.join("\n"));
			}

			function hasContent() {
				var arr = [];
				arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
				arr.push("判断结果为：");
				arr.push(UE.getEditor('editor').hasContents());
				alert(arr.join("\n"));
			}

			function setFocus() {
				UE.getEditor('editor').focus();
			}

			function deleteEditor() {
				disableBtn();
				UE.getEditor('editor').destroy();
			}

			function disableBtn(str) {
		/* 		var div = document.getElementById('btns');
				var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
				for(var i = 0, btn; btn = btns[i++];) {
					if(btn.id == str) {
						UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
					} else {
						btn.setAttribute("disabled", "true");
					}
				} */
			}

			function enableBtn() {
		/* 		var div = document.getElementById('btns');
				var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
				for(var i = 0, btn; btn = btns[i++];) {
					UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
				} */
			}

			function getLocalData() {
				alert(UE.getEditor('editor').execCommand("getlocaldata"));
			}

			function clearLocalData() {
				UE.getEditor('editor').execCommand("clearlocaldata");
				alert("已清空草稿箱")
			}

			function upData() {
				//向sayhello.php发起一个异步的Ajax GET请求, 请求超时时间为10s， 请求完成后执行相应的回调。
				UE.ajax.requeset('sayhello.php', {

					//请求方法。可选值： 'GET', 'POST'，默认值是'POST'
					method: 'GET',

					//超时时间。 默认为5000， 单位是ms
					timeout: 10000,

					//是否是异步请求。 true为异步请求， false为同步请求
					async: true,

					//请求携带的数据。如果请求为GET请求， data会经过stringify后附加到请求url之后。
					data: {
						name: 'ueditor'
					},

					//请求成功后的回调， 该回调接受当前的XMLHttpRequest对象作为参数。
					onsuccess: function(xhr) {
						console.log(xhr.responseText);
					},

					//请求失败或者超时后的回调。
					onerror: function(xhr) {
						alert('Ajax请求失败');
					}

				});
			}
		</script>
	</body>

</html>